import { onMounted, onUnmounted, Ref, ref } from 'vue'

const useClickDropdown = (dropdownRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false)
  // 全屏点击事件
  const handler = (e: MouseEvent) => {
    if (dropdownRef.value) {
      if (!dropdownRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }

  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })

  return isClickOutside
}

// 下拉菜单点击事件封装方法
export const showClickFn = (isShow: Ref<boolean>) => {
  const handleShowClick = () => {
    isShow.value = !isShow.value
  }

  return { handleShowClick }
}

export default useClickDropdown
